<template>
    <div>
        <div v-if="show">
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                <el-form-item label="所属仓库" prop="wId">
                    <el-select v-model="formInline.wId" placeholder="请选择仓库">
                        <el-option v-for="item in options" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属客户" prop="belongName">
                    <el-input placeholder="请输入内容" v-model="formInline.belongName" :disabled="true">
                        <el-button slot="append" @click="getData">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="日期筛选">
                    <el-date-picker
                        v-model="formInline.value2"
                        type="datetimerange"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="Selecttime"
                        :default-time="['00:00:00', '00:00:00']"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset('form')" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="Searchrefresh">
            <el-tooltip placement="top">
                <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
            </el-tooltip>
            <el-tooltip content="刷新" placement="top">
                <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
            </el-tooltip>
        </div>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="120" align="center"> </el-table-column>
            <el-table-column prop="wName" label="货品名称" align="center">  </el-table-column>
            <el-table-column prop="wName" label="仓库" width="120" align="center"> </el-table-column>
            <el-table-column prop="name" label="货品名称" align="center"> </el-table-column>
            <el-table-column prop="number" label="货品编码" align="center"> </el-table-column>
            <el-table-column prop="spec" label="货品规格" align="center"> </el-table-column>
            <el-table-column prop="startStock" label="期初数" align="center"> </el-table-column>
            <el-table-column prop="putStock" label="入库数量" align="center"> </el-table-column>
            <el-table-column prop="takeStock" label="出库数量" align="center"> </el-table-column>
            <el-table-column prop="endStock" label="当前库存" align="center"> </el-table-column>
        </el-table>
         <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hide"
                @size-change="handleSizeCha"
                @current-change="handleCurrentCha"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 所属客户 -->
        <el-dialog title="归属仓储客户选择" :visible.sync="dialogTableVisible" width="70%">
            <el-table :data="gridData">
                <el-table-column property="name" label="名称" width="150" align="center"></el-table-column>
                <el-table-column property="address" label="地址" width="200" align="center"></el-table-column>
                <el-table-column property="contacts" label="联系人" align="center"></el-table-column>
                <el-table-column property="callNumber" label="电话" align="center"></el-table-column>
                <el-table-column property="fax" label="传真" align="center"></el-table-column>
                <el-table-column property="phone" label="手机" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row.name, scope.row.cId)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 所属客户弹窗分页 -->
            <div class="block">
                <el-pagination
                style="float:right;"
            background
            v-if="hid"
                    @size-change="handleSizeChang"
                    @current-change="handleCurrentChang"
                    :current-page="pagi.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagi.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagi.total"
                >
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Warehousedata, customer, Warehousechange } from '../../api/user.js';
export default {
    name: 'draglist',
    data() {
        return {
            // 搜索框
            formInline: {
                pageNum: 1,
                pageSize: 10,
                // 开始时间
                startTime: undefined,
                // 结束时间
                endTime: undefined,
                // 开始和结束时间
                time: [],
                // 时间选择
                value2: ''
            },
            // 所属仓库
            options: [],
            // 所属客户
            gridData: [],
            dialogTableVisible: false,
            // 所属客户分页
            pagi: {
                pageNum: 1,
                pageSize: 10,
                total: undefined
            },
            // 显示隐藏
            show: true,
            disabled: false,
            // 数据
            tableData: [],
            // 数据总条目数
            total:undefined,
            hide:false,
            hid:false
        };
    },

    methods: {
        // 搜索框
        onSubmit() {
            Warehousechange(this.formInline).then((ref) => {
                console.log(ref);
                this.tableData = ref.rows
                this.total = ref.total
                if(ref.rows == ''){
                    this.hide = false
                }else{
                    this.hide = true
                }
            });
        },
        // 选择时间
        Selecttime() {
            this.formInline.startTime = this.formInline.value2[0];
            this.formInline.endTime = this.formInline.value2[1];
            this.formInline.time = this.formInline.value2;
        },
        // 所属仓库
        Warehouse() {
            Warehousedata().then((ref) => {
                // console.log(ref);
                this.options = ref.rows;
            });
        },
        // 所属客户
        getData() {
            this.dialogTableVisible = true;
            customer(this.pagi).then((ref) => {
                (this.gridData = ref.rows), (this.pagi.total = ref.total);
                if(ref.rows){
                    this.hid = true
                }else{
                    this.hid = false
                }
            });
        },
        // 所属客户选择框
        handleEdit(name, cId) {
            this.dialogTableVisible = false;
            this.formInline.belongName = name;
            this.formInline.cId = cId;
        },
        // 所属客户分页
        handleSizeChang(val) {
            this.pagi.pageSize = Number(val);
            this.getData();
        },
        // 所属客户分页（页数）
        handleCurrentChang(val) {
            this.pagi.pageNum = Number(val);
            this.getData();
        },
        // 重置
        Reset(formName) {
            this.$refs.formInline.resetFields();
            this.onSubmit();
        },
        // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 页面分页
        handleSizeCha(val){
            this.formInline.pageSize = Number(val);
            this.onSubmit();
        },
        // 页面分页(几个)
                handleCurrentCha(val) {
            this.formInline.pageNum = Number(val);
            this.onSubmit();
        },
    },
    mounted() {
        this.Warehouse();
    }
};
</script>

<style scoped lang="less">
/deep/.el-form--inline .el-form-item__label{
    font-weight: 700 !important;
}
.Searchrefresh{
    float: right;
    margin: 10px;
}
.block{
    height: 20px;
    margin-top: 10px;
}
</style>
